import { formatDate } from '../../utils/time';
import './index.scss'
import { Progress } from 'antd';

function GoodsInfoCard({ goods, selectedGoods }) {
  const onAcitveClick = () => {
    
  }

  return (
    <div className='goods-info'>
      <div className='horizontal-item'>
        <div className='label'>USD/USDT</div>
        <div className='value greenC'>{selectedGoods?.price_config.USDT}</div>
      </div>
      <div className='horizontal-item'>
        <div className='label'>SOL</div>
        <div className='value strong'>{selectedGoods?.price_config.SOL}</div>
      </div>
      <div className='horizontal-item'>
        <div className='label'>Activities</div>
        <div className='value' onClick={onAcitveClick}>Friends help to get more<img className='right-arrow' alt='right arrow' src={require('../../assets/right-arrow.png')} /></div>
      </div>
      <div className='divider'></div>
      <div className='horizontal-item'>
        <div className='label'>Dalivery</div>
        <div className='value'>Expected to be shipped on { goods && formatDate(goods?.estimated_delivery_unix_time) }</div>
      </div>
      <div className='vertical-item'>
        <div className='label'>Packaging regulations</div>
        <div className='regulations'>
          {selectedGoods?.sku_specs[0].value}/box
        </div>
      </div>
      <div className='divider'></div>
      <div className='vertical-item'>
        <div className='label'>Sold</div>
        <div className='range'>
          <Progress percent={selectedGoods?.sales / selectedGoods?.stock * 100} strokeColor={'#65AE02'} />
        </div>
      </div>
    </div>
  )
}

export default GoodsInfoCard